<!DOCTYPE html>
<html>
    <head>
        <title>HTML 文档结构</title>
    </head>

    <body>
        <!-- <center>
      <font color="”red" ”>Welcome to Web Site</font>
    </center> -->

        <div class="main" style="color: rgb(53, 39, 114)">
            <div class="row">
                <input class="input" type="text" id="inputtext" onkeydown="handlekeydown(event)"/>
                <input
                    type="button"
                    name="bt"
                    value="添加"
                    onclick="handleClick(event)"
                    id="button1"
                />
                <input type="button" name="bt" value="删除" id="button2" />
            </div>

            <div id="todogroup">
                <!-- <div id="todo1"><input class="inck" type="checkbox"/>吃饭<button id="todob1" onclick="deleteIndex(1)"> 删除</button></div>
                <div id="todo2"><input class="inck" type="checkbox"/>睡觉<button id="todob2" onclick="deleteIndex(2)"> 删除</button></div>
                <div id="todo3"><input class="inck" type="checkbox"/>打豆豆<button id="todob3" onclick="deleteIndex(3)"> 删除</button></div> -->
            </div>

            <span style="color: rgb(1, 1, 17)">到底了------------</span>

            <div id="all_selected">
                <input
                    type="checkbox"
                    id="all_selectedip"
                    onclick="clickSelectBox(event)"
                />

                <label id="checkboxSign" for="all_selected">全选</label>
            </div>
        </div>
    </body>
    <style>
        /* padding: 20px 30px 40px 50px     --与父容器上下左右的距离 */
        /* padding-top: 20px                --与父容器上侧距离 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .main {
            /* background-color: aqua;
            width: 240px;
            height: 240px; */
            background-color: #f3f7f8;
            padding: 8px;
            border: 6px solid rgb(239, 246, 243);
            border-radius: 8px;
        }

        .row {
            display: flex;
            border: 3px;
            border-color: #1c1d1e;
            /* background-color: #c5dbee; */
        }

        #inputtext {
            flex-grow: 1;
            /* width: 100%; */
            /* height: 30px; */
            /* background-color: #d4ebb9; */
            /* color: white; */
            margin: 6px;
            padding: 3px;
            border-radius: 4px;
        }

        #button1 {
            /* flex-grow: 1; */
            margin: 6px;
            padding: 3px;
            border-radius: 4px;
        }

        #button2 {
            /* flex-grow: 1; */
            margin: 6px;
            padding: 3px;
            border-radius: 4px;
            /* margin-left: 200px; */
        }

        .item {
            display: flex;
            /* justify-content: space-between; */
            align-items: center;
            /* width: 100%; */
            /* height: 30px; */
            /* background-color: #d4ebb9; */
            /* color: white; */
            margin: 6px;
            padding: 3px;
        }

        .item-value {
            flex-grow: 1;
            color: rgb(0, 0, 0);
        }

        .item-del {
            color: aliceblue;
            background-color: rgb(5, 0, 6);
            border: 0px;
            /* margin-left: 200px; */
        }
        .input {
            padding: 8px;
            outline: none;
            border: 2px soild #b1afaf;
        }
        .item-del {
            color: white;
            background-color: rgb(248, 105, 9);
            border: 0px;
            opacity: 0;

            /* opacity: 0; */
            /* clear:both;
      float:right; */
            margin-left: 200px;
        }
        .item:hover {
            background-color: rgb(232, 218, 13);
        }
        .item:hover .item-del {
            opacity: 1;
        }
        .input:focus {
            box-shadow: 0px 0px 10px rgb(239, 150, 202);
            border: 2px solid rgb(239, 150, 202);
        }
    </style>
    <script lang="javascript">
        var tot=1;
        function init() {
          console.log("init");
          // document.getElementById('button2').onclick= handleClick;
          // document.getElementById('button2').onclick = handleClickDeleteLast;
          document.getElementById('button2').onclick = handleClickDeleteindex;
          console.log("after init");
        }

        function handlekeydown(e){
          console.log("key in:" + e.key);
          if(e.key=="Enter")
          {
            document.getElementById("button1").click();
          }
        }


        function deleteIndex(a){

          console.log("deleteIndex");
          console.log(a);

          // document.getElementById("checkboxSign").innerHTML="全选";
          // document.getElementById("all_selectedip").checked=false;
          

          var temp = document.getElementById("todogroup");
          document.getElementById("todo"+a).remove();
        }

        function clickSelectBox(e) {
          console.log("clickSelectBox");
          console.log(e);
          var temp = document.getElementsByClassName("inck");
          for (var i = 0; i < temp.length; i++) {
            temp[i].checked = e.target.checked;
          }

          if(e.target.checked)
          {
            document.getElementById("checkboxSign").innerHTML="全不选";
          }
          else
          {
            document.getElementById("checkboxSign").innerHTML="全选";
          }
        }


        function handleClickDeleteindex(e) {
          console.log("handleClickDeleteIndex");
          console.log(e);

          document.getElementById("checkboxSign").innerHTML="全选";
          document.getElementById("all_selectedip").checked=false;

          var temp = document.getElementById("todogroup");
          // temp.removeChild(temp.childNodes[1]);
          //枚举temp的子节点
          for (var i = temp.childNodes.length-1; i >= 0; i--) {
            //temp1是当前节点
            // var temp1 = temp.childNodes[i];

            //判断单选框是否被勾选，如果被勾选，则删除这个节点
            if (temp.childNodes[i].firstChild .checked) {
              temp.removeChild(temp.childNodes[i]);
            }
            // if(temp.childNodes[i].getElementsByTagName("input"))
            // {
            //   temp.removeChild(temp.firstChild);
            //   console.log(temp.childNodes[i]);
            // }

          }


        }

        function handleClickDeleteLast(e) {
          console.log("handleClickDeleteLast");
          console.log(e);
          var temp = document.getElementById("todogroup");
          temp.removeChild(temp.lastChild);
        }

        function handleClick(e) {
          console.log("handleClick");
          console.log(e);



          //
          document.getElementById("checkboxSign").innerHTML="全选";
          document.getElementById("all_selectedip").checked=false;


          // var temp = document.getElementById("inputtext");
          var temp = getValue();
          
          document.getElementById("inputtext").value = "";

          if(temp==""){
            alert("输入的todo事件不允许为空！");
            return;
          }

          document.getElementById("todogroup").innerHTML +=
            "<div class='item' id=\"todo"+
                tot+
               "\"><input class=\"inck\" type=\"checkbox\"/>" +
                "<div class='item-value'>"+
               temp +
               '</div>'+
               "<button class='item-del' id=\"todob\""+
               tot +
               "\"  onclick=\"deleteIndex("+
               tot +
               ")\"> 删除</button>"+ "</div>";
          // document.getElementById("todogroup").insertAdjacentHTML("<div>" + temp + "</div>");
          // console.log(temp.value);
          // document.getElementsByClassName("main")[0].style="background-color: #333333"
          tot++;
        }

        function getValue() {
          var temp = document.getElementById("inputtext");
          console.log(temp.value);
          return temp.value;
        }



        init();
    </script>
</html>